import BasicMapUtils from './BasicMapUtils'
// const icon = require('assets/images/situational-awareness/security-map-icon.png')
const ol = window.ol
const securityPeopleData = [
  // {
  //   name: '南湖公园',
  //   lng: 108.342842,
  //   lat: 22.810566,
  //   icon,
  //   title: '南湖公园1',
  //   id: '2'
  // },
  // {
  //   name: '新民东葛路口',
  //   lng: 108.324515,
  //   lat: 22.818723,
  //   icon,
  //   title: '1',
  //   id: '2'
  // },
  // {
  //   name: '新阳明秀路口',
  //   lng: 108.28126,
  //   lat: 22.821193,
  //   icon,
  //   title: '1',
  //   id: '2'
  // }
]

class SecurityPeople extends BasicMapUtils {
  constructor() {
    super()
    this.markerLayer = ''
    this.position = ''
    this.overlay = ''
    this.initSecurityPeople()
  }
  async initSecurityPeople() {
    this.onClickEvent()
    await this.coordinateMethod()
    this.drawMarker()
    this.mapView.animate({ zoom: 15.1 })
  }
  // 转坐标的方法
  coordinateMethod() {
    securityPeopleData.forEach(value => {
      const [x, y] = this.coordTransform.wgs84tobd09(value.lng, value.lat)
      value.lng = x
      value.lat = y
    })
  }
  // 循环所有点
  drawMarker() {
    securityPeopleData.forEach(item => {
      const [x, y] = [item.lng, item.lat]
      const params = {
        markerCenter: [x, y],
        icon: item.icon,
        userData: item.id
      }
      this.addMarker({ ...params })
    })
  }
  // 创建一个点
  addMarker({ markerCenter, icon, userData }) {
    const centerPoint = new ol.geom.Point(markerCenter)
    this.coordTransform.convertGeoIntoMap(centerPoint)
    const markerParams = {
      x: centerPoint.getCoordinates()[0],
      y: centerPoint.getCoordinates()[1],
      icon,
      userData: userData,
      anchor: [0, 0]
    }
    const markerObject = this.createMarker({ ...markerParams })
    this.markerLayer = markerObject.markerLayer
    this.map.addLayer(markerObject.markerLayer)
  }
  onClickEvent() {
    let overlay = ''
    this.map.on('click', e => {
      const feature = this.map.forEachFeatureAtPixel(e.pixel, feature => {
        return feature
      })
      overlay && overlay.setPosition(undefined)
      if (feature) {
        if (feature.get('userData').type === 'marker') {
          this.position = e.coordinate
          overlay = this.addOverlay('.security-detail-pop')
        }
      }
    })
  }
  addOverlay(value) {
    console.log(this.position)
    this.overlay = this.createOverlay({
      htmlElement: document.querySelector(value),
      position: this.position
    })
    this.map.addOverlay(this.overlay)
    return this.overlay
  }
}

export default SecurityPeople
